<template>
  <Modal v-model="modal" :title="title" @on-cancel="onCancel">
    <div class="tag-modal">
      <Form :model="form" :label-width="80" ref="form" :rules="rules">
        <FormItem label="标题:">
          <Upload
            :before-upload="handleUpload"
            :on-success="handleSuccess"
            action="//jsonplaceholder.typicode.com/posts/"
            :on-format-error="handleFormatError"
            :format="['xls','xlsx']"
          >
            <Button icon="ios-cloud-upload-outline" style="width:200px">上传文件</Button>
          </Upload>
        </FormItem>
        <FormItem label>
          <div v-if="this.file !== null">文件名称:{{ this.file.name }}</div>
        </FormItem>
        <FormItem label>
          <p
            @click="upload"
            style="text-decoration:underline ; cursor:pointer ; width: 270px"
          >1、下载导入模板，第二行为范本，导入从第三行开始</p>
           <!-- <p
            style=" width: 270px"
          >2、 经销商的APP抢购目标门店数或APP抢购基础门店数或APP抢购目标条数为0或没有维护，该经销商不参与计算</p> -->
        </FormItem>
      </Form>
    </div>
    <div slot="footer">
      <Button @click="cancle" size="large" type="text">取消</Button>
      <Button
        :disabled="btnDisabled"
        @click="onSave"
        :loading="loadingStatus"
        type="primary"
        size="large"
      >确定</Button>
    </div>
  </Modal>
</template>
<script>
import table from '@/table'
export default {
  data() {
    return {
      id: null,
      modal: false,
      title: '导入',
      btnDisabled: false,
      loadingStatus: false,
      status: 'pass',
      file: null
    }
  },
  methods: {
    openModal() {
      this.modal = true
    },
    closeModal() {
      this.modal = false
    },
    onCancle() {
      this.$refs['form'].resetFields()
      this.modal = false
    },
    cancle() {
      this.$refs['form'].resetFields()
      this.modal = false
    },
    upload() {
     this.status = 'loading'
     this.$jsonPost('/assets/store_reward/excel/exportIntegralTemplate')
      .then(res => {
        this.status = 'pass'
        setTimeout(() => {
          this.$router.push('/home/export/list')
        }, 500)
      })
      .catch(err => {
        this.status = 'pass'
      })
    },
    handleUpload(file) {
      this.file = file
      return false
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: '格式不对哦,请选择正确的格式上传',
        desc: file.name + '文件名不正确，请选择xlsx格式'
      })
    },
    onSave() {
      if (this.btnDisabled) return
      if (this.file == null) {
        this.$Notice.success({
          title: `请先上传文件哦~`
        })
        this.btnDisabled = false
        return
      }
      let url = 'assets/store_reward/excel/importIntegral'
      const formData = new FormData()
      formData.set('file', this.file)
      this.$jsonPost(url, formData)
        .then(data => {
          this.$Notice.success({
            title: `导入成功`
          })
          this.$emit('complete', data)
          this.btnDisabled = false
          this.closeModal()
          this.$refs['form'].resetFields()
          this.file = null
        })
        .catch(() => {
          this.btnDisabled = false
        })
    }
  }
}
</script>